<template>
  <view class="ve-card" :style="customStyle">
    <template v-if="title || $slots.title">
      <view v-if="type != 'none'" :class="['ve-card-header', 've-card-header__' + type]" @tap="onTap">
        <view class="ve-card-header-title">
          <template v-if="title"> {{ title }} </template>
          <slot name="title" />
        </view>
        <view :class="['ve-card-header-sub-title', type, { danger: redSubTitle ? true : false }]" :style="customSubStyle" v-if="subTitle">
          {{ subTitle }}
        </view>
        <view class="ve-card-header-operator" v-if="fold || close || $slots.extra || $slots['operator-left']">
          <slot name="operator-left"></slot>
          <view class="ve-card-header-tigger" v-if="fold">
            <template v-if="contentShow">
              <text>收起</text>
              <ve-icon name="arrow_top_1" size="28" />
            </template>
            <template v-else>
              <text>展开</text>
              <ve-icon name="arrow_bottom_1" size="28" />
            </template>
          </view>
          <view class="ve-card-header-close" @tap.stop.prevent v-if="close" @tap="onClose">
            <ve-icon name="delete_1" size="40" />
          </view>
          <slot name="extra" />
        </view>
      </view>
      <!-- header透明，可切换展开，header底部边框 -->
      <template v-if="type == 'none'">
        <view class="ve-card-header" @tap="onTap">
          <view class="ve-card-header-title">
            {{ title }}
            <slot name="status"></slot>
            <slot name="title" />
          </view>
          <view class="ve-card-header-operator" v-if="fold || close || $slots.extra || $slots['operator-left']">
            <slot name="operator-left"></slot>
            <view class="ve-card-header-tigger" v-if="fold">
              <template v-if="contentShow">
                <text>收起</text>
                <ve-icon name="arrow_top_1" size="28" />
              </template>
              <template v-else>
                <text>展开</text>
                <ve-icon name="arrow_bottom_1" size="28" />
              </template>
            </view>
            <view class="ve-card-header-close" @tap.stop.prevent v-if="close" @tap="onClose">
              <ve-icon name="delete_1" size="40" />
            </view>
            <slot name="extra" />
          </view>
          <view v-if="noneCaseSubTitle" class="ve-card-none-case-subTitle">{{ noneCaseSubTitle }}</view>
          <slot name="noneCaseSubTitle" />
        </view>
        <view class="ve-card-header-border-line" v-show="contentShow || $slots['forever-show']">
          <view class="ve-card-header-border-line-content"></view>
        </view>
      </template>
    </template>

    <view class="ve-card-content" :style="customContentStyle" v-show="contentShow || $slots['forever-show']">
      <!-- 插槽 -->
      <div class="forever-show-wrapper" v-if="$slots['forever-show']">
        <slot name="forever-show" :contentIsShow="contentShow"></slot>
      </div>
      <div class="content-fold" v-show="contentShow">
        <slot></slot>
      </div>
    </view>

    <view class="ve-card-header-border-line" v-if="$slots.footer">
      <view class="ve-card-header-border-line-content"></view>
    </view>
    <view class="ve-card-footer" v-if="$slots.footer">
      <slot name="footer"></slot>
    </view>
  </view>
</template>

<script>
  export default {
    name: 've-card',
    props: {
      title: String,
      subTitle: String,
      // blue : 浅蓝，yellow : 浅黄， danger : 浅红， gray : 浅灰, none : 透明(默认)
      type: {
        type: String,
        default: 'none',
      },
      redSubTitle: Boolean,
      // 是否显示折叠按钮
      fold: {
        type: Boolean,
        default: false,
      },
      close: {
        type: Boolean,
        default: false,
      },
      // type 为 none 情况下，控制 fold 展开收起
      initFold: {
        type: Boolean,
        default: true,
      },
      // type 为 none 情况下，默认是否展开内容，此值应该只初始化一次
      defaultFold: {
        type: Boolean,
        default: true,
      },
      // 主容器样式
      customStyle: {
        type: Object,
        default: () => {},
      },
      // 自定义副标题样式
      customSubStyle: {
        type: Object,
        default: () => {},
      },
      // type为 none情况下的副标题
      noneCaseSubTitle: {
        type: String,
        default: '',
      },
      // 自定义 contentStyle
      customContentStyle: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        initialed: false,
        contentShow: this.defaultFold,
      }
    },
    watch: {
      initFold: {
        handler(newVal) {
          if (this.initialed) {
            this.contentShow = newVal
          } else {
            // 初始化
            // 判断 defaultFold
            let fold = true
            if (this.defaultFold == false) {
              fold = false
            } else {
              fold = newVal
            }
            this.contentShow = fold
            this.initialed = true
          }
        },
        immediate: true,
      },
    },
    methods: {
      onTap() {
        if (this.fold) {
          this.contentShow = !this.contentShow
          this.$emit('update:initFold', this.contentShow)
        }
      },
      onClose() {
        this.$emit('close')
      },
    },
  }
</script>
<style lang="scss" scoped>
  .ve-card {
    position: relative;
    background: #ffffff;
    border-radius: 8rpx;
    margin-bottom: 24rpx;
    padding-top: 1rpx;
    // box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);

    &-header {
      box-sizing: border-box;
      padding: 24rpx 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: -1rpx;
      border-radius: 8rpx 8rpx 0 0;

      &-title {
        flex: 1;
        display: inline-flex;
        align-items: center;
        font-size: 32rpx;
        font-weight: 600;
        color: #191c27;
      }

      &-operator {
        display: flex;
      }

      &-tigger {
        margin-left: 24rpx;
        display: flex;
        align-items: center;
        color: rgba(48, 114, 246, 1);
        font-size: 28rpx;

        & > text {
          font-weight: 400;
          color: #3072f6;
          margin-right: 8rpx;
        }
      }

      &-close {
        font-size: 0;
        margin-left: 24rpx;
      }

      &-sub-title {
        font-size: 28rpx;
        font-weight: 400;
        color: #3072f6;
        line-height: 32rpx;

        &.danger {
          color: #fe615a;
        }

        &.blue {
          color: #3072f6;
        }

        &.gray {
          color: #8491a8;
        }

        &.yellow {
          color: #e59b1c;
        }
        &.purple {
          color: #722ed1;
        }
        &.green {
          color: #00b42a;
        }
        &.pink {
          color: #f53f3f;
        }
      }

      &-border {
        height: 108rpx;

        &-line {
          padding: 0 24rpx;
          &-content {
            width: 100%;
            height: 1px;
            background-color: rgba(216, 216, 216, 0.3);
          }
        }
      }

      &__blue {
        background-image: linear-gradient(to right, #d5e5ff, #ffffff);
        color: #3072f6;
      }

      &__yellow {
        background-image: linear-gradient(to right, #fff3d5, #ffffff);
        color: #e59b1c;
      }

      &__danger {
        background-image: linear-gradient(to right, #fde7e7, #ffffff);
        color: #df3232;
      }

      &__gray {
        background-image: linear-gradient(to right, #eaecef, #ffffff);
        color: #8491a8;
      }

      &__purple {
        background-image: linear-gradient(to right, #f5e8ff, #ffffff);
        color: #722ed1;
      }

      &__green {
        background-image: linear-gradient(to right, #d4ffd8, #ffffff);
        color: #00b42a;
      }

      &__pink {
        background-image: linear-gradient(to right, #fde7e7, #ffffff);
        color: #f53f3f !important;
      }
    }

    &-content {
      padding: 0 24rpx 1rpx;
    }

    &-footer {
      width: 100%;
      height: 128rpx;
      padding: 0 24rpx;
    }
    &-none-case-subTitle {
      color: rgba(48, 114, 246, 1);
      font-size: 28rpx;
    }
  }
</style>
